<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height:500px;
            background: pink;
        }
        /*流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局*/
        /*视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。
          承载关系：浏览器---->viewport---->网页
        */
        /*适配要求：
            1. 网页宽度必须和浏览器保持一致
            2. 默认显示的缩放比例和PC端保持（缩放比例1.0）
            3. 不允许用户自行缩放网页
            满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。
        */
        /*适配设置：
            如果任何设置都没有，默认走的就是viewport的默认设置
            去设置新的viewport设置,达到适配要求。
            <meta name="viewport"> 设置视口的标签  在head里面并且应该紧接着编码设置
            viewport的功能：
            1. width    可以设置宽度   (device-width 当前设备的宽度)
            2. height   可以设置高度
            3. initial-scale  可以设置默认的缩放比例
            4. user-scalable  可以设置是否允许用户自行缩放
            5. maximum-scale  可以设置最大缩放比例
            6. minimum-scale  可以设置最小缩放比例
            在<meta name="viewport" content="" >  content="" 使用以上参数
            1. width=device-width   宽度一致比例是1.0
            2. initial-scale=1.0    宽度一致比例是1.0
            3. user-scalable=no     不允许用户自行缩放  （yes，no  1,0）
            标准适配方案：
            <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
            meta:vp + tab  快捷方式
        */
    </style>
</head>
<body>
<div class="box">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>